import './Home.scss'
import { useState } from 'react';
import { Tooltip, DatePicker } from 'antd';
import { useNavigate, useParams } from 'react-router-dom'
import { useRequest } from 'alova/client'
import { Http } from '../Utils/Api';
import { useEffect } from 'react';
import { SwapOutlined } from '@ant-design/icons';
import { startTitleStore } from '../Config/zustand'

import { TopDateTemplate } from './data'
import { useEventEmitter, useMount } from 'ahooks';


const LeftTableTop = [
    { label: '单位名称' },
    {
        label: '收入',
        flex: 316,
        child: [
            { label: '目标', flex: 1 },
            { label: '完成', flex: 1 },
            { label: '占比', flex: 1 },
        ]
    },
    {
        label: '利润',
        flex: 316,
        child: [
            { label: '目标', flex: 1 },
            { label: '完成', flex: 1 },
            { label: '占比', flex: 1 },
        ]
    },
    { label: '合同\n资产', flex: 102 },
]
const RightTableTop = [
    { label: '单位名称' },
    {
        label: '新签合同订单',
        flex: 726,
        child: [
            { label: '目标', flex: 1 },
            { label: '本月完成', flex: 1 },
            { label: '本年累计完成', flex: 1 },
            { label: '完成占比%', flex: 1 },
        ]
    },
]

const ListA01 = [
    { color: 'rgba(45, 97, 198, 0.8)', label: '收入', value: 'A01' },
    { color: 'rgba(45, 97, 198, 0.8)', label: '成本', value: 'A02' },
    { color: 'rgba(45, 97, 198, 0.8)', label: '利润', value: 'A03' },
    { color: 'rgba(45, 97, 198, 0.8)', label: '合同资产', value: 'A04' },
    { color: 'rgba(203, 79, 96, 0.8)', label: '新签订单目标', value: 'A05' },
    { color: 'rgba(203, 79, 96, 0.8)', label: '新签订单完成', value: 'A06' },
    { color: 'rgba(203, 79, 96, 0.8)', label: '完成比例', value: 'A07' },
    { color: 'rgba(203, 79, 96, 0.8)', label: '在手订单', value: 'A08' },
]



const Home = () => {
    const navigate = useNavigate()
    const pramas = useParams()

    const { updateProjectTitle } = startTitleStore()


    const [Date, setDate] = useState()

    const [DataWA01, setDataWA01] = useState({ A01: 0, A02: 0, A03: 0, A04: 0, A05: 0, A06: 0, A07: 0, A08: 0 })
    const [DataYA01, setDataYA01] = useState({ A01: 0, A02: 0, A03: 0, A04: 0, A05: 0, A06: 0, A07: 0, A08: 0 })
    const [DataYFA01, setDataYFA01] = useState({ A01: 0, A02: 0, A03: 0, A04: 0, A05: 0, A06: 0, A07: 0, A08: 0 })

    const [TypeA01, setTypeA01] = useState([])
    const [TypeA02, setTypeA02] = useState([])

    const [UnitSwitch, setUnitSwitch] = useState(1)

    const { send } = useRequest((data) => Http(data), { immediate: false })

    const onNavType = (type) => {
        const { uuid } = pramas
        const typeMapping = { 1: 'A01', 2: 'A02' }
        navigate(`/Start/Page/${typeMapping[type]}${uuid ? '/' + uuid : ''}`)
    }

    const onDownward = (e, levelId) => {
        if (levelId > 0) navigate(`/Start/Home/${e}`)
    }

    useEffect(() => {
        const { uuid } = pramas
        const YearMonth = sessionStorage.getItem('YearMonth')
        if (YearMonth) setDate(YearMonth)
        else send({ url: 'getScreenManageYearMonth', params: { organizationUuid: uuid } }).then(res => setDate(res.data.eventDate))
    }, [pramas])

    useEffect(() => {
        if (Date) {
            const { uuid } = pramas
            send({ url: 'getScreenManageList', params: { organizationUuid: uuid, YearMonth: Date } }).then(res => {
                const { organizationName, eventDate, wanyuan, yiyuanzhengshu, yiyuanxiaoshu } = res.data
                updateProjectTitle(organizationName)
                setDataWA01({
                    A01: wanyuan.收入, A02: wanyuan.成本, A03: wanyuan.利润, A04: wanyuan.合同资产,
                    A05: wanyuan.新签订单目标, A06: wanyuan.新签订单完成, A07: wanyuan.经营完成比例, A08: wanyuan.经营在手订单
                })
                setDataYA01({
                    A01: yiyuanzhengshu.收入, A02: yiyuanzhengshu.成本, A03: yiyuanzhengshu.利润, A04: yiyuanzhengshu.合同资产,
                    A05: yiyuanzhengshu.新签订单目标, A06: yiyuanzhengshu.新签订单完成, A07: yiyuanzhengshu.经营完成比例, A08: yiyuanzhengshu.经营在手订单
                })
                setDataYFA01({
                    A01: yiyuanxiaoshu.收入, A02: yiyuanxiaoshu.成本, A03: yiyuanxiaoshu.利润, A04: yiyuanxiaoshu.合同资产,
                    A05: yiyuanxiaoshu.新签订单目标, A06: yiyuanxiaoshu.新签订单完成, A07: yiyuanxiaoshu.经营完成比例, A08: yiyuanxiaoshu.经营在手订单
                })
            })
            send({ url: 'getScreenManageCompanyList', params: { organizationUuid: uuid, YearMonth: Date } }).then(res => setTypeA01(res.data.list))
            send({ url: 'getScreenOperateCompanyList', params: { organizationUuid: uuid, YearMonth: Date } }).then(res => setTypeA02(res.data.list))
        }
    }, [pramas, Date])

    const Event = useEventEmitter()
    Event.useSubscription(val => {
        const { type, data } = val
        if (type === 'onDate') setDate(data)
        if (type === 'onUnit') setUnitSwitch(data === 1 ? 2 : 1)
    })

    return (
        <div className='Home'>
            {Date && <TopDateTemplate date={Date} unit={UnitSwitch} Event={Event} />}
            <div className='DataA01'>
                {ListA01.map(({ color, label, value }, index) =>
                    <div key={index}>
                        <div style={{ background: color }}>{label}</div>
                        <Tooltip placement='bottom' title={UnitSwitch === 1 ? DataYFA01[value] : DataWA01[value]} overlayStyle={{ fontSize: 48, fontFamily: 'R-Spectr' }}>
                            <div>{UnitSwitch === 1 ? DataYA01[value] : DataWA01[value]}</div>
                        </Tooltip>
                    </div>
                )}
            </div>
            <div className='Type'>
                <div className='Left'>
                    <div className='Title' onClick={() => onNavType(1)}>管理</div>
                    <div className='TableTop'>
                        {LeftTableTop.map(({ label, flex, child }, index) => {
                            if (child) {
                                return (
                                    <div className='TableTopA02' style={flex ? { flex } : { width: 130 }} key={index}>
                                        <div style={{ background: 'rgba(80, 125, 209, 1)' }}>{label}</div>
                                        <div>
                                            {child.map(({ label, flex }, key) =>
                                                <div key={key} style={flex ? { flex, background: 'rgba(80, 125, 209, 1)' } : { width: 130, background: 'rgba(80, 125, 209, 1)' }}  >{label}</div>
                                            )}
                                        </div>
                                    </div>
                                )
                            } else {
                                return (
                                    <div className='TableTopA01' key={index} style={flex ? { flex, background: 'rgba(80, 125, 209, 1)' } : { width: 130, background: 'rgba(80, 125, 209, 1)' }} >{label}</div>
                                )
                            }
                        })}
                    </div>
                    <div className='TableList'>
                        {TypeA01.map(({ uuid, 公司名称, 收入目标, 收入, 收入完成比, 利润目标, 利润, 利润完成比, 合同资产, levelId }) =>
                            <div key={uuid}>
                                <div onClick={() => onDownward(uuid, levelId)}>{公司名称}</div>
                                <div>
                                    <div>{收入目标}</div>
                                    <div>{收入}</div>
                                    <div>{收入完成比}%</div>
                                    <div>{利润目标}</div>
                                    <div>{利润}</div>
                                    <div>{利润完成比}%</div>
                                    <div>{合同资产}</div>
                                </div>
                            </div>
                        )}
                    </div>
                </div>
                <div className='Right'>
                    <div className='Title' onClick={() => onNavType(2)}>经营</div>
                    <div className='TableTop'>
                        {RightTableTop.map(({ label, flex, child }, index) => {
                            if (child) {
                                return (
                                    <div className='TableTopA02' style={flex ? { flex } : { width: 130 }} key={index}>
                                        <div style={{ background: 'rgba(192, 109, 161, 1)' }}>{label}</div>
                                        <div>
                                            {child.map(({ label, flex }, key) =>
                                                <div key={key} style={flex ? { flex, background: 'rgba(192, 109, 161, 1)' } : { width: 130, background: 'rgba(192, 109, 161, 1)' }}>{label}</div>
                                            )}
                                        </div>
                                    </div>
                                )
                            } else {
                                return (
                                    <div className='TableTopA01' key={index} style={flex ? { flex, background: 'rgba(192, 109, 161, 1)' } : { width: 130, background: 'rgba(192, 109, 161, 1)' }} >{label}</div>
                                )
                            }
                        })}
                    </div>
                    <div className='TableList'>
                        {TypeA02.map(({ uuid, 公司名称, 新签订单目标, 本月完成, 本年累计完成, 完成比, levelId }) =>
                            <div key={uuid}>
                                <div onClick={() => onDownward(uuid, levelId)}>{公司名称}</div>
                                <div>
                                    <div>{新签订单目标}</div>
                                    <div>{本月完成}</div>
                                    <div>{本年累计完成}</div>
                                    <div>{完成比}%</div>
                                </div>
                            </div>
                        )}
                    </div>
                </div>
            </div>
        </div>
    );
};

export default Home;